<template>
  <div style="overflow: hidden;height: 100%;">
    <canvas id="gameCanvas"></canvas>
    <div v-if="status>=0" @click="this.clickPerson" class="person"></div>
    <TipPop v-if="status==0" @clickStart="this.tipClickStart" @close="this.tipClose" />
    <ResultPop v-if="status==2" :score="score" @clickList="this.resultClickList" @clickGet="this.resultClickGet" @clickAgain="this.resultClickAgain" @close="this.resultClose" />
    <ListPop :user="user" :allUserInfo="allUserInfo" v-if="status==3" @clickStart="this.listClickStart" @clickShare="this.listClickShare" @close="this.listClose" />
    <div class="wechat-share-back" v-if="wechatShare" @click="this.closeWechatShare"></div>
  </div>
</template>
<script>
import TipPop from "./component/TipPop.vue";
import ListPop from "./component/ListPop.vue";
import ResultPop from "./component/ResultPop.vue";

import "./style.css";
import Game from "./Game";

import CONSTANT from "../../../wechat/static/constant/constant.js";
import wsService from "../../../wechat/static/common/wechat-jsdk.js";

import common from "../../../wechat/static/common/common";

const getUserRankURL =
  "https://harmonygame.icebartech.com/api/html5/user/rank/findUserRank";

export default {
  components: {
    TipPop,
    ListPop,
    ResultPop
  },
  data() {
    return {
      status: -1, //游戏状态 -1 未初始化完成 0 未开始 1 进行中 2 游戏结束 3 游戏有存档
      score: 0,
      user: {},
      allUserInfo: {},
      wechatShare: false
    };
  },
  mounted() {
    this.init();
    this.setWechatShare();
  },
  methods: {
    initGame() {
      let game = new Game();
      this.game = game;
      game.onStart = () => {
        if (this.status < 0) {
          this.status = 0;
        }
      };
      game.onOver = score => {
        this.gameOver(score);
      };
    },
    async getUserInfo() {
      this.sessionId = common.getCookie("sessionId");
      let res = await this.$http.post(
        `${getUserRankURL}?sessionId=${this.sessionId}`,
        {},
        { emulateJSON: true }
      );
      if (res.data.data.bussData) {
        let [user, allUserInfo] = res.data.data.bussData;
        if (user) {
          this.user = user;
          this.allUserInfo = allUserInfo;
          this.status = 3;
        }
      }
    },
    async init() {
      this.initGame();
    },
    clickPerson() {
      this.$router.push("rushPerson");
    },
    gameOver(score) {
      this.score = score;
      this.status = 2;
    },
    tipClickStart() {
      this.status = 1;
    },
    tipClose() {
      this.tipClickStart();
    },
    resultClickList() {
      this.getUserInfo();
    },
    resultClickAgain() {
      this.status = 1;
      this.game.reset();
    },
    resultClickGet() {
      this.$toast.center("领取成功");
      setTimeout(() => {
        this.$router.push("rushPerson");
      }, 1000);
    },
    resultClose() {
      this.resultClickAgain();
    },
    listClickStart() {
      this.status = 1;
      this.game.reset();
    },
    listClickShare() {
      this.openWechatShare();
    },
    listClose() {
      this.status = 1;
      this.game.reset();
    },
    openWechatShare() {
      this.wechatShare = true;
    },
    closeWechatShare() {
      this.wechatShare = false;
    },
    setWechatShare() {
      let url = "https://harmonygame.icebartech.com/wechat",
        couponShare = {
          title: "亨吉利小游戏",
          imgUrl: "",
          desc: "亨吉利小游戏--直飞冲天，获取奖品",
          link: `${url}`
        };

      wsService
        .getJsSDK(CONSTANT.URL.ACCOUNT.WEIXINJSDK, {
          params: {}
        })
        .then(() => {
          wsService.setWXShare({
            isShare: true,
            shareDetail: couponShare
          });
        });
    }
  }
};
</script>
